<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>查看公司审核状态</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="company-approval">
      <el-form inline size="small">
        <el-form-item label="公司">
          <el-input v-model="searchValue" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询记录</el-button>
        </el-form-item>
      </el-form>
      <div class="company-approval-table-div">
        <el-table fit stripe border :data="companyList" style="width:100%" height="parent">
          <el-table-column label="公司名称" prop="name" min-width="80px" header-align="center"></el-table-column>
          <el-table-column label="注册人" prop="userName" min-width="70px" header-align="center"></el-table-column>
          <el-table-column label="手机号" prop="phone" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="状态" width="55px" align="center">
            <template slot-scope="scope">
              <span>{{getStatusName(scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="65px" align="center">
            <template slot-scope="scope" v-if="scope.row.status===0">
              <div class="table-handle">
                <div>
                  <el-button type="primary" size="mini" @click="toApprovalCompany(scope.row,3)">免费</el-button>
                </div>
                <div>
                  <el-button type="primary" size="mini" @click="toApprovalCompany(scope.row,1)">付费</el-button>
                </div>
                <div>
                  <el-button type="primary" size="mini" @click="toApprovalCompany(scope.row,2)">拒绝</el-button>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</body>

<script src="../myJs/importFile.js"></script>
<script>
  importFile();

</script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        companyList: [],
        searchValue: ''
      };
    },

    created: function () {
      this.setCompanyList();
    },

    methods: {
      setCompanyList: function () {
        var searchValue = this.searchValue;
        this.loading = true;
        var self = this;
        ajaxRequest('company/getAllCompany', {
          companyName: searchValue
        }).then(function (companyList) {
          self.companyList = companyList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      searchData: function () {
        this.setCompanyList();
      },

      getStatusName: function (status) {
        var data = ['未审核', '付费', '已拒绝', '免费'];
        return data[status];
      },

      toApprovalCompany: function (company, status) {
        var name = company.name;
        this.loading = true;
        var self = this;
        ajaxRequest('company/approvalCompany', {
          companyName: name,
          status: status
        }).then(function (msg) {
          self.loading = false;
          self.$alert(msg, '信息', {
            callback: function () {
              self.setCompanyList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    }
  });

</script>

<style>
  .company-approval {
    padding: 10px 8px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .company-approval .el-form-item {
    margin-bottom: 10px;
  }

  .company-approval .company-approval-table-div {
    flex: 1;
    overflow: auto;
  }

  .company-approval .table-handle>div {
    margin-bottom: 5px;
  }

  .company-approval .table-handle>div:last-child {
    margin-bottom: 0;
  }

  .el-message-box{
    width: 90%;
    min-width: 150px;
    max-width: 420px;
  }

</style>

</html>
